<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title th:text="#{tag} + ' - Online Judge'"></title>
    <meta http-equiv="keywords" th:content="'HappyOJ, Online Judge, 编程, 在线判题系统, 在线IDE'">
    <meta http-equiv="description" th:content="'HappyOJ ' + #{tag}">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar">
            <div>
                <h2 class="tag-nums" th:text="${pageInfo.total} + ' ' + #{tags}"></h2>
                <p class="" style="line-height: 20px" th:text="#{tag_description}"></p>
            </div>
            <div class="tag-tools">
                <div class="tag-search">
                    <input class="tagSearch" name="tagSearch" type="text" th:placeholder="#{tag-search-placeholder}" />
                </div>
                <div class="tag-create">
                    <a class="create-tag-button tag">
                        <svg class="add-tag-icon" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M13 11h7a1 1 0 110 2h-7v7a1 1 0 11-2 0v-7H4a1 1 0 110-2h7V4a1 1 0 112 0v7z" clip-rule="evenodd"></path></svg>
                        [[#{tag}]]
                    </a>
                </div>
            </div>
            <div class="tag-layout" >
                <div class="tag-layout__item" th:each="tag,stat : ${pageInfo.list}">
                    <div class="tag-header">
                        <div class="tags">
                        <span>
                             <a class="tag" th:tag="${tag.name}" th:text="${tag.name}"></a>
                        </span>
                        </div>
                    </div>
                    <div class="tag-description" th:tagname="${tag.name}">
                        <span th:title="${tag.description}" th:text="${tag.description}"></span>
                    </div>
                    <div class="tag-stat">
                        <div>
                            <a th:href="'/problemset?tag=' + ${tag.name}" rel="tag" th:text="${tag.problem_count} + ' '"></a> [[#{tag_problems}]] ,
                            <a th:href="'/topics?tag=' + ${tag.name}" rel="tag" th:text="${tag.topic_count} + ' '"></a> [[#{tag_topics}]],
                            [[#{tag_create_at}]] <span th:title="${#dates.format(tag.indate,'yyyy-MM-dd HH:mm:ss')}" th:text="${tag.createFriendlyDate}"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin:0 12px;font-size:15px;">
                <div class=left></div>
                <div class="right">
                    <a th:if="${pageInfo.hasPreviousPage == true}" th:href="@{/tags/page/{pageNum}(pageNum=${pageInfo.prePage})}" style="color:#000;text-decoration: none;">&larr;</a>
                    <a th:if="${pageInfo.firstPage > 1}" th:href="@{/tags/page/1}" style="color:#000;text-decoration: none;">1</a>
                    <span th:if="${pageInfo.firstPage > 2}"  >...</span>
                    <span th:each="nav:${pageInfo.navigatepageNums}">
                    <a th:href="@{/tags/page/{pageNum}(pageNum=${nav})}" th:text="${nav}" th:if="${nav == pageInfo.pageNum}" style="font-weight: bold;color:#000;text-decoration: none;"></a>
                    <a th:href="@{/tags/page/{pageNum}(pageNum=${nav})}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}" style="color:#000;text-decoration: none;"></a>
                    </span>
                    <span th:if="${pageInfo.lastPage < pageInfo.pages}" >...</span>
                    <a th:if="${pageInfo.pages > pageInfo.lastPage}" th:href="@{/tags/page/{pageNum}(pageNum=${pageInfo.pages})}" th:text="${pageInfo.pages}" style="color:#000;text-decoration: none;"></a>
                    <a th:if="${pageInfo.hasNextPage == true}" th:href="@{/tags/page/{pageNum}(pageNum=${pageInfo.nextPage})}" style="color:#000;text-decoration: none;">&rarr;</a>
                </div>
            </div>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>

<div class="pop-div" id="pop-div"></div>
<div class="pop-inner-div small-scrollbar" id="pop-inner-div">
    <div style="text-align: center">[[#{tag.post}]]</div>
    <div class="comment" style="position: relative;padding: 6px;">
        <input id="tag-title" class="tag-title-new" name="title" maxlength="20" th:placeholder="#{tag.input-name}">
        <textarea id="tag-content" class="tag-content-new" name="content" rows="10"></textarea>
        <div>
            <a class="submit-button tag-new-submit">
                <svg viewBox="0 0 1024 1024" p-id="4278" width="14" height="14"><path d="M978.7 67.5c0-0.1-0.1-0.1-0.1-0.2-2.1-4.1-5.1-7.8-8.8-10.8-3.6-3-7.7-5.2-12-6.6-0.1 0-0.2-0.1-0.3-0.1-1.7-0.6-3.5-0.9-5.3-1.2-0.5-0.1-1-0.3-1.6-0.3-1.7-0.2-3.3-0.2-5-0.1-0.7 0-1.3-0.1-2 0-4.8 0.3-9.6 1.7-14 3.9L61.5 482.6c-8.5 4.1-15 11.5-18 20.5-0.9 2.5-1.3 5.2-1.6 7.8-0.9 5.3-0.7 10.8 1 16 2.8 9.1 9.1 16.6 17.6 20.9l220.3 115.8c5.3 2.8 11.1 4.2 17.1 4.2 13.3 0.1 25.5-7.1 32-18.7 9.5-17.3 2.8-38.8-14.8-48.1l-161-84.6 647.5-321.2-394.9 453.5c-0.3 0.3-0.4 0.7-0.7 1-9.8 6.4-16.2 17.2-16.2 29.6v261.1c0.1 9.5 4 18.6 10.8 25.3 6.8 6.7 16 10.3 25.5 10.2v0.1c20 0 36.2-15.9 36.2-35.5V694.3L893.4 199l-89.6 653.3-227.3-109.2c-17.9-8.6-39.4-1.4-48.5 16.2-4.2 8.5-4.8 18.3-1.7 27.3 3.1 9 9.7 16.3 18.3 20.3l270.1 129.9c5 2.4 10.4 3.6 16 3.6 0.2 0 0.4-0.1 0.6-0.1 0.6 0 1.3 0.2 1.9 0.2 18 0.1 33.3-13 35.9-30.8l112-816.1c2.5-8.4 2-17.7-2.4-26.1z" p-id="4279" fill="#ffffff"></path></svg>
                [[#{tag.post}]]
            </a>
        </div>
    </div>
</div>
<script th:src="@{/js/messager.js}"></script>
<script>
$(document).ready(function(){
    function ShowTagModifyArea(element) {
        var tag_name = element.attr("tagname");
        var tag_desc = element.text().trim()
        var appendHtml ="<textarea id='temp' class='tag-textarea small-scrollbar'></textarea><span class='fielderror'></span>"
        element.text("");
        element.append(appendHtml);
        $("textarea#temp").html(tag_desc)
        $("textarea#temp").focus();
        $("textarea").blur(function(){
            var new_desc = $(this).val()
            $.post("/api/tag/post",{ type: 'edit', name: tag_name, description: new_desc},
                function (data) {
                    if (data.code != 200) {
                        $(".fielderror").html(data.msg);
                        $("textarea#temp").focus();
                        return;
                    }
                    element.html(new_desc);
                    $.messager.show('提示', '标签 ' + tag_name + '已更新。', 5000);
                },
                "json"
            );
        })
    }

    $(document).on("dblclick",".tag-description",function(){
        var element = $(this)
        $.getJSON("/api/role/check", {},function(json) {
            if (json.code == 200) {
                ShowTagModifyArea(element);
            }
        });
    });

    function showFilterTags(data) {
        $(".tag-layout").html("");
        var opt = "";
        var tags = data.tagList;
        $.each(tags, function(i, event) {
            opt +=
                "<div class='tag-layout__item'>"+
                "<div class='tag-header'>"+
                "<div class='tags'>"+
                "<span><a rel='tag'>" + tags[i].name + "</a></span>"+
                "</div>"+
                "</div>"+
                "<div class='tag-description' tagname='"+ tags[i].name + "'>";
                if (tags[i].description != null) {
                    opt += "<span title='" + tags[i].description + "'>" + tags[i].description + "</span>";
                } else {
                    opt += "No description";
                }
            opt +="</div>"+
                "<div class='tag-stat'>"+
                "<div>"+
                "<a href='/problemset?tag=" + tags[i].name + "' rel='tag'>"+ tags[i].problem_count + "</a>" + " " + data.tag_problems_name + ", " +
                "<a href='/topics?tag=" + tags[i].name + "' rel='tag'>"+ tags[i].topic_count + "</a>" + " " + data.tag_topics_name + ", " +
                data.tag_post_name + "<span >" + tags[i].createFriendlyDate + "</span>"+
                "</div>"+
                "</div>"+
                "</div>";
        });
        $(".tag-layout").html(opt);
        $(".tag-nums").html(tags.length + " " + data.tags_name);
    }

    var cache = {};
    function tagsFilter(word) {
        if ( word in cache ) {
            showFilterTags(cache[ word ]);
        } else {
            $.getJSON("/api/tags/filter",{q: word},function(json) {
                if (json.success != true) {
                    cache[ word ] = json.data;
                    showFilterTags(json.data);
                }
            });
        }
    }

    $(".tagSearch").bind('input propertychange',function(e) {
        var word = $(this).val();

        if (window.event && event.type == 'propertychange' && event.propertyName != 'value')
            return;

        window.clearTimeout($(this).data('timeout'));
        $(this).data('timeout', setTimeout(function () {
            tagsFilter(word);
        }, 2000));
    });

    $(document).on("click",".create-tag-button",function(){
        $(".pop-div").fadeIn();
        $(".pop-inner-div").fadeIn();
        document.documentElement.style.overflowY = 'hidden';
    });
    $(".pop-div").click(function(){
        $(".pop-div").fadeOut();
        $(".pop-inner-div").fadeOut();
        document.documentElement.style.overflowY = 'scroll';
    });
    $(document).on("click",".tag-new-submit",function(){
        var name = document.getElementById('tag-title').value;
        var description = document.getElementById('tag-content').value;
        $.post("/api/tag/post",{ type: 'new', name: name, description: description},
            function (data) {
                if (data.code != 200) {
                    $.messager.show('Error', data.msg, 5000);
                    return;
                }
                $.messager.show('提示', '标签 ' + name + '已创建。', 5000);
                tagsFilter("");
                $(".pop-div").fadeOut();
                $(".pop-inner-div").fadeOut();
                document.documentElement.style.overflowY = 'scroll';
            },
            "json"
        );
    });

});
</script>
</body>
</html>
